<template>
  <div class='demo'>
    <top></top>
    <div>
      <div class="demo1">
        <div class="demo7">
          <video class="demo3" :src=video.url controls="controls"></video>
          <div style="position: absolute;width: 958px;height: 150px;margin-left: 352px;margin-top: 49px">
          <vue-baberrage
            style="text-align: center;"
            :isShow= "barrageIsShow"
            :barrageList = "barrageList"
            :loop = "barrageLoop"
          >
          </vue-baberrage>
          </div>
        </div>
      </div>
      <div class="demo4">
        <el-col :span="24" v-for="o in 1" :key="o">
          <el-card :body-style="{ padding: '0px' }" style="width: 250px;height: 550px">
            <!--<img :src="video.pic" class="image" width="100%" height="200px">-->
            <div style="padding: 0px;">
              <span></span>
              <div style="line-height: 20px">

              </div>
              <div class="bottom clearfix">
                <time class="time"></time>
              </div>
            </div>
          </el-card>
        </el-col>

      </div>
    </div>
    <div class="demo6">
      <div class="demo5">
        <el-form ref="elForm" :model="elForm" size="medium" label-width="100px"
                 label-position="left">
          <el-col :span="12">
            <el-form-item prop="msg">
              <el-input v-model="elForm.msg" placeholder="发表你的独特弹幕吧" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="addToList">发表</el-button>
              <el-button @click="resetForm('elForm')">清空</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
  </div>

</template>
<script>
  import { MESSAGE_TYPE } from 'vue-baberrage'

  export default {

    components: {
      // top
    },
    props: [],
    data() {
      return {
        elForm:{
          msg: '',
        },

        barrageIsShow: true,
        currentId : 0,
        barrageLoop: false,
        barrageList: [],
        video: {},
        discuss: [],
        formData: {
          discuss: undefined,
        },
        rules: {
          discuss: [{
            required: true,
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
      addToList () {
        this.barrageList.push({
          id: ++this.currentId,
          avatar: "./static/avatar.jpg",
          msg: this.elForm.msg,
          time: 5,
          type: MESSAGE_TYPE.NORMAL,
        }),
        this.resetForm('elForm')
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
    mounted() {
    }
  }
</script>

<style >
  .demo {
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
    /*background-image: url("../assets/imgs/bg01.jpg");*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
  }

  .demo1 {
    /*float: left;*/
  }

  .demo2 {
    float: left;
    width: 10px;
    height: 100px;
    margin-top: 50px;
    margin-left: 50px;
  }

  .demo3 {
    width: 50%;
    height: 50%;
    margin-top: 50px;
    float: left;
    margin-left: 350px;
  }

  .demo4 {
    margin-right: 50px;
    margin-top: 50px;
    float: right;
  }

  .demo5 {
    margin-left: 400px;
    margin-top: -140px;
    width: 50%;
    height: 60px;
  }

  .demo6 {
    margin-top: 38pc;
  }

  .demo7 {

  }

  img {
    display: block;
    margin: auto;
  }

  .time {
    font-size: 10px;
    color: #999;
  }

  .bottom {
    margin-top: 5px;
    line-height: 1px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  /*.demo:hover{*/
  /*display: block;*/
  /*}*/
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 1px;
  }

  .box-card {
    width: 300px;
  }
</style>

